<template>
  <div>
    <el-card style="background-color: #ededed82;">
      <!-- 方框展示数据 -->
      <div style="margin-left: 10%;">
        <el-row style="text-align: center;">
          <el-col :span="4" class="colCss">
            <el-card class="cardCss" shadow="hover">
              <div class="dataNum">{{merchant_num}}</div>
              <div class="bottomName" style="background-color: #409EFF;">
                <div>门店数量</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" class="colCss">
            <el-card class="cardCss" shadow="hover">
              <div class="dataNum">{{medicine_num}}</div>
              <div class="bottomName" style="background-color: #66CD00;">
                <div>上架商品数量</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" class="colCss">
            <el-card class="cardCss" shadow="hover">
              <div class="dataNum"><span style="font-size: 2vw;">￥</span>{{today_sum_money}}</div>
              <div class="bottomName" style="background-color: #F56C6C;">
                <div>今日成交额</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" class="colCss">
            <el-card class="cardCss" shadow="hover">
              <div class="dataNum">{{today_sum_order_num}}</div>
              <div class="bottomName" style="background-color: #9932CC;">
                <div>今日成交订单量</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4" class="colCss">
            <el-card class="cardCss" shadow="hover">
              <div class="dataNum">{{user_num}}</div>
              <div class="bottomName" style="background-color: #FF1493;">
                <div>用户数量</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </div>
      <div style="">
        <div style="margin: 2% 1% 1% 1%;display: flex;justify-content: space-between;">
          <!-- firstStart -->

          <div style="width: 49.5%;">
            <el-card shadow="never">
              <div style="text-align: center;margin-bottom: 20px;">
                <el-date-picker style="width: 50%;margin-right: 10px;" v-model="storeTimeList" type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" size="large" @click="handleSubmitStore(1)">搜索</el-button>
              </div>
              <div id="main" style="width: 100%;height:400px;"></div>
            </el-card>
          </div>
          <!-- secondStart -->
          <div style="width: 49.5%;">
            <el-card shadow="never">
              <div style="text-align: center;margin-bottom: 20px;">
                <el-date-picker style="width: 50%;margin-right: 10px;" v-model="shopTypeTimeList" type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" size="large" @click="handleSubmitStore(2)">搜索</el-button>
              </div>
              <div id="main2" style="width: 100%;height:400px;"></div>
            </el-card>
          </div>
        </div>

        <div style="margin: 1% 1% 1% 1%;display: flex;justify-content: space-between;">

          <!-- thirdStart -->
          <div style="width: 49.5%;">
            <el-card shadow="never">
              <div style="text-align: center;margin-bottom: 20px;">
                <el-date-picker style="width: 50%;margin-right: 10px;" v-model="repurchTimeList" type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" size="large" @click="handleSubmitStore(3)">搜索</el-button>
              </div>
              <div id="main3" style="width: 100%;height:400px;"></div>
            </el-card>
          </div>
          <!-- fourStart -->
          <div style="width: 49.5%;">
            <el-card shadow="never">
              <div style="text-align: center;margin-bottom: 20px;">
                <el-date-picker style="width: 50%;margin-right: 10px;" v-model="userOrderTimeList" type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
                <el-button type="primary" size="large" @click="handleSubmitStore(4)">搜索</el-button>
              </div>
              <div id="main4" style="width: 100%;height:400px;"></div>
            </el-card>
          </div>
        </div>

      </div>

    </el-card>

  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        merchant_num: 0,
        medicine_num: 0,
        today_sum_money: 0,
        today_sum_order_num: 0,
        user_num: 0,
        formdata: [],
        storeTimeList: [], //门店时间
        storeData: [],
        storeForm: {
          start_time: "",
          end_time: ""
        },
        shopTypeTimeList: [], //商品分类时间
        shopTypeData: [],
        shopTypeForm: {
          start_time: "",
          end_time: ""
        },
        repurchTimeList: [], //复购率时间
        repurchData: [],
        repurchForm: {
          start_time: "",
          end_time: ""
        },
        userOrderTimeList: [], //用户下单统计
        userOrderData: [],
        userOrderForm: {
          start_time: "",
          end_time: ""
        },

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },

    mounted() {
      this.getEnterpriseDataSummary() //获取统计信息
      this.getMerchantSelling() //门店营收数据
      this.getClassifySelling() //获取商品分类销售情况
      this.getReBuyRate() //复购率
      this.getOrderCounts() //全天订单量统计
    },

    methods: {
      handleSubmitStore(num) {
        if (num == 1) {
         console.log(this.storeTimeList)
          if (this.storeTimeList != null) {
            this.storeForm.start_time = this.storeTimeList[0]
            this.storeForm.end_time = this.storeTimeList[1]
          }
          this.getMerchantSelling()
          console.log(this.storeTimeList)
        }
        if (num == 2) {
          // console.log(this.shopTypeTimeList)
          if (this.shopTypeTimeList != null) {
            this.shopTypeForm.start_time = this.shopTypeTimeList[0]
            this.shopTypeForm.end_time = this.shopTypeTimeList[1]
          }
          this.getClassifySelling()
        }
        if (num == 3) {
          // console.log(this.repurchTimeList)
          if (this.repurchTimeList != null) {
            this.repurchForm.start_time = this.repurchTimeList[0]
            this.repurchForm.end_time = this.repurchTimeList[1]
          }
          this.getReBuyRate()
        }
        if (num == 4) {
          // console.log(this.userOrderTimeList)
          if (this.userOrderTimeList != null) {
            this.userOrderForm.start_time = this.userOrderTimeList[0]
            this.userOrderForm.end_time = this.userOrderTimeList[1]
          }
          this.getOrderCounts()
        }
      },

      //全天订单量统计
      async getOrderCounts() {
        this.userOrderTimeList=[]
        await this.$api.getOrderCounts(this.userOrderForm).then(res => {
          this.userOrderData = res.data.data
          this.userOrderTimeList.push(res.data.time_info.start_time)
          this.userOrderTimeList.push(res.data.time_info.end_time)
        })
        let dataName = []
        let dataNum = []
        for (var key in this.userOrderData) {
          dataName.push(key)
          dataNum.push(this.userOrderData[key])
        }
        // console.log(dataName)
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '用户下单统计（单）',
            x: 'center'
          },
          tooltip: {},
          legend: {
            data: dataName,
            right: 10, // legend 放置在右侧中间。
            top: '20',
            right: "100",
            orient: 'vertical' // 纵向布局。
          },
          xAxis: { //x轴显示数据
            data: dataName
          },
          yAxis: {}, //y轴数据
          series: [{
            // name: '营收',
            type: 'line',
            data: dataNum,
            label: { //标签，柱形头上的数字
              show: true,
              position: "outside",
              color: "rgba(0, 0, 0, 1.0)"
            }
          }],
          itemStyle: {
            // 设置扇形的颜色
            color: '#5099e6',
          }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

      //复购率
      async getReBuyRate() {
        this.repurchTimeList=[]
        await this.$api.getReBuyRate(this.repurchForm).then(res => {
          this.repurchData = res.data.data
          this.repurchTimeList.push(res.data.time_info.start_time)
          this.repurchTimeList.push(res.data.time_info.end_time)

        })
        let dataName = []
        let dataNum = []
        for (var i in this.repurchData) {
          let dataOne = {
            value: "",
            name: ""
          }
          if (this.repurchData[i].times_2 != undefined && this.repurchData[i].times_2 != 0) {
            dataOne.value = this.repurchData[i].times_2
            dataOne.name = "2次购买" + this.repurchData[i].percentage
          } else if (this.repurchData[i].times_3 != undefined && this.repurchData[i].times_3 != 0) {
            dataOne.value = this.repurchData[i].times_3
            dataOne.name = "3次购买" + this.repurchData[i].percentage
          } else if (this.repurchData[i].times_4 != undefined && this.repurchData[i].times_4 != 0) {
            dataOne.value = this.repurchData[i].times_4
            dataOne.name = "4次购买" + this.repurchData[i].percentage
          } else if (this.repurchData[i].times_5 != undefined && this.repurchData[i].times_5 != 0) {
            dataOne.value = this.repurchData[i].times_5
            dataOne.name = "5次以上购买" + this.repurchData[i].percentage
          }

          dataName.push(dataOne.name)
          dataNum.push(dataOne)
        }
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
        var option = {
          color: ['#ffaa00', '#5099e6', '#55ffff', '#aaaaff'],
          title: {
            text: '复购率（次）',
            x: 'center'
          },
          legend: { //图列的显示
            orient: "vertical",
            // left: "left",
            right: "2%",
            top: "5%",
            data: dataName,
            width: "auto"
          },
          tooltip: {},
          series: [{ //鼠标移到某个区域显示的
            // name: '营收',
            type: 'pie',
            data: dataNum,
            stillShowZeroSum: true, //是否在数据和为0（一般情况下所有数据为0） 的时候不显示扇区。
            label: {
              position: 'inside', //文字显示在图形里面
              fontSize: "16"
            },
          }],

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },


      //商品分类销售情况
      async getClassifySelling() {
        this.shopTypeTimeList=[]
        await this.$api.getClassifySelling(this.shopTypeForm).then(res => {
          this.shopTypeData = res.data.data
          this.shopTypeTimeList.push(res.data.time_info.start_time)
          this.shopTypeTimeList.push(res.data.time_info.end_time)
        })
        let dataName = []
        let dataNum = []
        for (var i in this.shopTypeData) {
          let dataOne = {
            value: "",
            name: ""
          }
          dataName.push(this.shopTypeData[i].classify_name + this.shopTypeData[i].percentage)
          dataOne.value = this.shopTypeData[i].selling_num
          dataOne.name = this.shopTypeData[i].classify_name + this.shopTypeData[i].percentage
          dataNum.push(dataOne)
        }
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));
        // 指定图表的配置项和数据
        var option = {
          color: ['#aa00ff', '#5099e6', '#ffaa00', '#c2c2c2', '#ff55ff', '#ffff00', '#ca8622', '#aaaaff', '#aaff00',
            '#aa0000', '#c4ccd3'
          ],
          title: {
            text: '商品分类销售情况',
            x: 'center'
          },
          legend: {
            orient: "vertical",
            // left: "left",
            bottom: "bottom",
            data: dataName
          },
          tooltip: {},
          series: [{
            // name: '营收',
            type: 'pie',
            data: dataNum,
          }],

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

      //门店营收数据
      async getMerchantSelling() {
        this.storeTimeList=[]
        await this.$api.getMerchantSelling(this.storeForm).then(res => {
          this.storeData = res.data.data
          this.storeTimeList.push(res.data.time_info.start_time)
          this.storeTimeList.push(res.data.time_info.end_time)
        })
        let dataName = []
        let dataNum = []
        for (var i in this.storeData) {
          if(i !="contains"){
            dataName.push(this.storeData[i].merchant_name)
            dataNum.push(this.storeData[i].amount)
          }

        }
        var echarts = require('echarts');
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '门店营收排行榜（元）',
            x: 'center'
          },
          tooltip: {},
          legend: {
            data: ['营收'],
            top: '20',
            right: "100",
            orient: 'vertical' // 纵向布局。
          },
          xAxis: { //x轴显示数据
            data: dataName
          },
          yAxis: {}, //y轴数据
          series: [{
            name: '营收',
            type: 'bar',
            data: dataNum,
            label: { //标签，柱形头上的数字
              show: true,
              position: "outside",
              color: "rgba(0, 0, 0, 1.0)"
            }
          }],
          itemStyle: {
            // 设置扇形的颜色
            color: '#5099e6',
          }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },



      //获取统计信息
      async getEnterpriseDataSummary() {
        await this.$api.getEnterpriseDataSummary().then(res => {
          if (res.data.level == "success") {
            this.formdata = res.data.data
            //调用定时器
            this.setIntervalMeth("merchant_num", this.formdata.merchant_num)
            this.setIntervalMeth("medicine_num", this.formdata.medicine_num)
            this.setIntervalMeth("today_sum_money", this.formdata.today_sum_money)
            this.setIntervalMeth("today_sum_order_num", this.formdata.today_sum_order_num)
            this.setIntervalMeth("user_num", this.formdata.user_num)
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      //定时器
      setIntervalMeth(type, formdataNum) {
        let num = 0
        let timeIn = setInterval(() => {
          if (formdataNum != 0 && formdataNum <= 10) {
            num++
          } else if (formdataNum <= 100) {
            num += 5
          } else if (formdataNum <= 500) {
            num += 15
          } else if (formdataNum <= 1000) {
            num += 55
          } else {
            num += 105
          }
          if (num > formdataNum) {
            num = formdataNum //如果加的数比传进来的数大，直接把值赋过去，防止不是整数时会继续加
          }
          if (type == "merchant_num") {
            this.merchant_num = num
            if (num == formdataNum) {
              clearInterval(timeIn)
            }
          }
          if (type == "medicine_num") {
            this.medicine_num = num
            if (num == formdataNum) {
              clearInterval(timeIn)
            }
          }
          if (type == "today_sum_money") {
            this.today_sum_money = num
            if (num == formdataNum) {
              clearInterval(timeIn)
            }
          }
          if (type == "today_sum_order_num") {
            this.today_sum_order_num = num
            if (num == formdataNum) {
              clearInterval(timeIn)
            }
          }
          if (type == "user_num") {
            this.user_num = num
            if (num == formdataNum) {
              clearInterval(timeIn)
            }
          }
        }, 50)

      }

    }
  }
</script>

<style scoped>
  /deep/.el-card__body {
    padding: unset;
    margin-top: 20px;
  }

  .colCss {
    padding-left: 2%;
    padding-right: 2%;
  }

  .cardCss {
    border-radius: 12px;
  }

  .dataNum {
    font-size: 2.8vw;
    padding: px;
    margin-bottom: 5px;
  }

  .bottomName {
    font-size: 0.8vw;
    color: white;
    height: 40px;
    line-height: 40px;
    background-color: red;
    /* border-top: 1px solid black; */
  }
</style>
